<template>
   
  <div class="app-container">
    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets"></i>
      <span>Shipping List</span>
    </el-card>
    <div class="table-container">
      <el-table ref="deliverOrderTable" style="width: 100%" :data="list" border>
        <el-table-column label="Order Number" width="180" align="center">
          <template slot-scope="scope">{{ scope.row.orderSn }}</template>
        </el-table-column>
        <el-table-column label="Recipient" width="180" align="center">
          <template slot-scope="scope">{{ scope.row.receiverName }}</template>
        </el-table-column>
        <el-table-column label="Mobile Number" width="160" align="center">
          <template slot-scope="scope">{{ scope.row.receiverPhone }}</template>
        </el-table-column>
        <el-table-column label="Postal Code" width="160" align="center">
          <template slot-scope="scope">{{
            scope.row.receiverPostCode
          }}</template>
        </el-table-column>
        <el-table-column label="Shipping Address" align="center">
          <template slot-scope="scope">{{ scope.row.address }}</template>
        </el-table-column>
        <el-table-column label="Delivery Method" width="160" align="center">
          <template slot-scope="scope">
            <el-select
              placeholder="Please select the logistics company"
              v-model="scope.row.deliveryCompany"
              size="small"
            >
              <el-option
                v-for="item in companyOptions"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
          label="Logistics Tracking Number"
          width="180"
          align="center"
        >
          <template slot-scope="scope">
            <el-input size="small" v-model="scope.row.deliverySn"></el-input>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 15px; text-align: center">
        <el-button @click="cancel">Cancel</el-button>
        <el-button @click="confirm" type="primary">Confirm</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { deliveryOrder } from "@/api/order";
const defaultLogisticsCompanies = [
  "SF-Express",
  "YT-Epress",
  "ZT-Express",
  "YD-Express",
];
export default {
  name: "deliverOrderList",
  data() {
    return {
      list: [],
      companyOptions: defaultLogisticsCompanies,
    };
  },
  created() {
    this.list = this.$route.query.list;
  },
  methods: {
    cancel() {
      this.$router.back();
    },
    confirm() {
      this.$confirm(
        "Are you sure you want to proceed with the shipment?",
        "Reminder",
        {
          confirmButtonText: "Confirm",
          cancelButtonText: "Cancel",
          type: "warning",
        }
      )
        .then(() => {
          deliveryOrder(this.list).then((response) => {
            this.$router.back();
            this.$message({
              type: "success",
              message: "Shipment successful!",
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "The shipment has been canceled",
          });
        });
    },
  },
};
</script>
<style></style>


